<script setup>
import { message } from 'ant-design-vue'
import { ref, toRaw, computed, onMounted } from 'vue'
import { changeUserInfo, recharge, applyAuthor, applyV } from '@/api/user/index.js'
import { useUserStore } from '@/store/modules/user.js'
const userStore = useUserStore()
let loading  = ref(false)
let payLoading = ref(false)
let applyLodaing = ref(false)
const amount = ref()
const goldCoinNums = ref()
const formModel = ref({
  username:  '',
  nickname: '',
  email: '',
  avatar: '',
  id: ''
})
const formLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 14,
  }
}
onMounted(() => {
  userStore.GetUserInfo().then(res => {
    formModel.value.username = res.username
    formModel.value.nickname = res.nickname
    formModel.value.email = res.email
    formModel.value.avatar = res.avatar
    formModel.value.id = res.id
    goldCoinNums.value = res.goldCoinNums
  })
})
// 上传头像
const handleChange = info => {
  if (info.file.status === 'done') {
    message.success(`上传成功,请点击保存修改即可修改头像`)
    formModel.value.avatar = info.file.response.data
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name} 上传失败`)
  }
}
// 更新个人信息
const handleSubmit = () => {
  loading.value = true
  changeUserInfo(toRaw(formModel.value))
    .then(() => {
      loading.value = false
      message.success('更新成功')
      userStore.GetUserInfo()
    })
    .finally(() => {
      loading.value = false
    })
}
// 充值金币
const handleRecharge = () => {
  payLoading.value = true
  recharge({ amount: amount.value })
    .then(() => {
      payLoading.value = true
      message.success('充值成功')
      userStore.GetUserInfo()
    })
    .catch(err => {
      message.error('充值失败')
    })
    .finally(() => {
      payLoading.value = true
    })
}
const handleApply = () => {
  applyLodaing.value = true
  applyAuthor()
    .then( () => {
      applyLodaing.value = false
      message.success('申请成功,等待审核中')  
    })
    .catch(err => {
      applyLodaing.value = false
      message.error('申请失败,请待会再试')
    })
}
const role = computed(() => {
  if (userStore.userInfo.role === 0) {
    return '读者'
  } else if (userStore.userInfo.urole === 1) {
    return '作家'
  } else {
    return '管理员'
  }
})
const handleApplyV = () => {
  applyV().then(() => {
    message.success('申请成功')
    userStore.GetUserInfo()
  }).catch((err) => {
    message.error(err || '申请失败')
  })
}
</script>

<template>
<div class="base-info">
  <div class="title">
    <span>个人资料</span>
    <span class="info">{{ role }}</span>
    <a-button type="link" v-if="userStore.userInfo.role === 0" @click="handleApply" :loading="applyLodaing">申请成为作家</a-button>
    <a-button @click="handleApplyV" type="primary" shape="round" style="float: right" v-if="userStore.userInfo.role === 1 && userStore.userInfo.isSign === 0">申请签约</a-button>
    <span class="my-status" v-if="userStore.userInfo.isSign !== 0">{{ userStore.userInfo.isSign === 1 ? '签约作者' : '签约中' }}</span>
  </div>
  <div class="wrapper">
    <div class="info">
      <a-form
        :model="formModel"
        v-bind="formLayout"
      >
        <a-form-item label="用户名" >
          <a-input v-model:value="formModel.username" :disabled="true"></a-input>
        </a-form-item>
        <a-form-item label="昵称">
          <a-input v-model:value="formModel.nickname"></a-input>
        </a-form-item>
        <a-form-item label="邮箱">
          <a-input v-model:value="formModel.email" :disabled="true"></a-input>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="handleSubmit" :loading="loading">保存修改</a-button>
        </a-form-item>
      </a-form>
      
    </div>
    <div class="extra">
      <div class="avatar-box">
        <a-upload
          name="file"
          :show-upload-list="false"
          :maxCount="1"
          action="http://localhost:9010/file/upload"
          @change="handleChange"
        >
          <img :src="formModel.avatar" class="avatar"/>
        </a-upload>
        <div class="desc">我的头像</div>
        <div class="info">
          支持 jpg、png、jpeg 格式大小 5M 以内的图片
        </div>
      </div>
    </div>
    <div class="author">
    </div>
  </div>
  <div class="title">
    我的金币
  </div>
  <div class="rest">
    {{ `我的金币余额: ${ goldCoinNums || '0'}`}}
  </div>
  <div class="fee">
    <div class="pay">
      <a-input-number v-model:value="amount" placeholder="请填写充值的金币" class="fee-input"></a-input-number>
      <a-button type="ghost" @click="handleRecharge" :loading="payLoading">充值</a-button>
    </div>
    <div class="desc">
      (充值1元=10金币,请支持正版小说)
    </div>
  </div>
</div>
</template>

<style lang="less" scoped>
.base-info {
  .title {
    overflow: hidden;
    font-weight: 600;
    font-size: 20px;
    line-height: 18px;
    color: #333;
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-top: 10px;
  .my-status {
    float: right;
    color: #fcc800;
    cursor: pointer;
  }
    .info {
      color: #fcc800;
      font-size: 16px;
      margin-left: 5px;
    }
  }
}
.wrapper {
  display: flex;

  .extra {
    padding-left: 74px;
    .avatar-box {
      text-align: center;  
      .desc {
        color: #1d2129;
        font-weight: 500;
        font-size: 14px;
        margin-top: 10px;
        margin-bottom: 8px;
      }
      .info {
        color: #86909c;
        font-size: 12px;
        line-height: 17px;
        font-weight: 400;
        width: 112px;
      }
    }
  }
  .author {
    padding-left: 30px;
  }
}
.info {
  width: 566px;
}
.rest {
  color: #FF6F3C;
  margin: 10px 0;
}
.avatar {
  border-radius: 5px;
  width: 120px;
  height: 120px;
  
}
.fee {
  .pay {
    display: flex;
    .fee-input {
      width: 300px;
      margin-right: 20px;
    }
  }
  .desc {
    color: #86909c;
    line-height: 17px;
    font-weight: 400;
    margin-top: 10px;
  }
}

</style>